<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
	<th:block th:include="include :: header('参会人员填报表')" />
	<th:block th:include="include :: datetimepicker-css" />
</head>

<body class="gray-bg">
	<div class="main-content">
		<form class="form-horizontal m" id="form-templatetable1-add">
			<input id="progressId" name="progressId" th:value="${conferenceProgress.progressId}" type="hidden">
			<input id="arrangeId" name="arrangeId" th:value="${conferenceProgress.arrangeId}" type="hidden">
			<input id="status" name="status" th:value="${conferenceProgress.status}" type="hidden">
			<h4 class="form-header h4">参会人员统计表</h4>
			<div class="col-sm-12">
				<div class="btn-group-sm" id="toolbar">
					<button type="button" class="btn btn-white btn-sm" onclick="addColumn()"><i
							class="fa fa-plus">增加</i></button>
					<button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i
							class="fa fa-minus">删除</i></button>
				</div>
				<div class="col-sm-12 select-table table-striped">
					<table id="bootstrap-table"></table>
				</div>
				<p style="color: red">填表说明：单人单次参加同一会议，只添加一条信息<!--每月最后一天前填报本年度累计情况；采用情况内容应包含采用时间、采用单位、采用文件文号（如：宜宾纪检信息**期等）--></p>
				<div class="row">
					<div class="col-sm-4">
						<div class="form-group">
							<label class="col-sm-4 control-label">填报单位：</label>
							<div class="form-control-static" th:text="${conferenceProgress.receiveDept}"></div>
						</div>
					</div>
					<div class="col-sm-4">
						<div class="form-group">
							<label class="col-sm-4 control-label">填报人：</label>
							<div class="form-control-static" th:text="${conferenceProgress.receiveUser}"></div>
						</div>
					</div>
					<div class="col-sm-4">
						<div class="form-group">
							<label class="col-sm-4 control-label">填报时间：</label>
							<div class="form-control-static" th:text="${today}"></div>
						</div>
					</div>
				</div>
			</div>
		</form>
		<div class="row">
			<div class="col-sm-offset-5 col-sm-10">
				<button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i
						class="fa fa-check"></i>上 报</button>&nbsp;
				<button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i
						class="fa fa-reply-all"></i>关 闭</button>
			</div>
		</div>
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: datetimepicker-js" />
	<script th:inline="javascript">
		var prefix = ctx + "conference/participant";
		$("#form-templatetable1-add").validate({
			focusCleanup: true
		});

		function submitHandler() {
			if ($.validate.form()) {
				var data = $("#form-templatetable1-add").serializeArray()
				//$('#status').val(status)
				$.operate.save(prefix + "/add", $("#form-templatetable1-add").serializeArray());
			}
		}

		$(function () {
			var options = {
				url: prefix + "/list",
				queryParams: {progressId: $('#progressId').val()},
				pagination: false,
				showSearch: false,
				showRefresh: false,
				showToggle: false,
				showColumns: false,
				sidePagination: "client",
				columns: [
					{
						checkbox: true,
					},
					{
						field: 'index',
						align: 'center',
						title: "序号",
						formatter: function (value, row, index) {
							/*var columnIndex = $.common.sprintf("<input class='form-control' type='hidden' name='conferenceParticipantList[%s].val1' value='%s'>", index, $.table.serialNumber(index));*/
							return $.table.serialNumber(index);
						}
					},
					{
						field: 'participantDept',
						align: 'center',
						title: '参会单位',
						formatter: function (value, row, index) {
							var html = $.common.sprintf("<input class='form-control' type='text' name='conferenceParticipantList[%s].participantDept' value='%s' required>", index, value);
							return html;
						}
					},
					{
						field: 'participantPost',
						align: 'center',
						title: '职务',
						formatter: function (value, row, index) {
							var html = $.common.sprintf("<input class='form-control' type='text' name='conferenceParticipantList[%s].participantPost' value='%s' required>", index, value);
							return html;
						}
					},
					{
						field: 'participantUser',
						align: 'center',
						title: '参会人员',
						formatter: function (value, row, index) {
							var html = $.common.sprintf("<input class='form-control' type='text' name='conferenceParticipantList[%s].participantUser' value='%s' required>", index, value);
							return html;
						}
					},
					{
						field: 'participantPhone',
						align: 'center',
						title: '联系方式',
						formatter: function (value, row, index) {
							var html = $.common.sprintf("<input class='form-control' type='text' name='conferenceParticipantList[%s].participantPhone' value='%s' required>", index, value);
							return html;
						}
					},
					{
						field: 'remark',
						align: 'center',
						title: '备注',
						formatter: function (value, row, index) {
							var html = $.common.sprintf("<input class='form-control' type='text' name='conferenceParticipantList[%s].remark' value='%s'>", index, value);
							return html;
						}
					},]
			};
			$.table.init(options);
		});

		function addColumn() {
			var count = $("#" + table.options.id).bootstrapTable('getData').length;
			var row = {
				index: $.table.serialNumber(count),
				participantDept: "",
				participantPost: "",
				participantUser: "",
				participantPhone: "",
				remark: "",
				/*val5: "",*/
			}
			sub.addColumn(row);
		}

		$("#bootstrap-table").on("post-body.bs.table", function (e, args) {
			$("input[name$='val3']").datetimepicker({
				format: "yyyy-mm-dd",
				minView: "month",
				autoclose: true,
				pickerPosition: 'top-right'
			});
		});
	</script>
</body>

</html>